<template>
  <div class="showDataPanel">
    <el-table class="tableView" :data="tableData" max-height="500" @current-change="handleCurrentChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="方案名称" prop="costPlanName" align="center" width="200"></el-table-column>
      <el-table-column label="方案类型" align="center" width="200">
        <template #default="props">
          {{ costPlanTypeObj[`${props.row.costPlanType}`] }}
        </template>
      </el-table-column>
      <el-table-column prop="costPlanColumnInfo" label="方案信息" align="center"/>
      <el-table-column label="详情" width="200" align="center">
        <template #default="scope">
          <el-button class="Btn" size="small" type="upd" @click="editCostPlan(scope.row)">
            <svg-icon icon-class="edit" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="delCostPlan(scope.row)">
            <svg-icon icon-class="del" class="buttonSvg"/>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-cost-plan-dialog ref="add_cost_plan_dialog" @queryData="queryData"/>

  </div>


</template>

<script>
import AddCostPlanDialog from "@/views/charging/components/AddCostPlanDialog.vue";

let component;
export default {
  name: "BillingSchemeTable",
  components: {AddCostPlanDialog},
  props: ["dataQuery"],
  data() {
    return {
      currentRow: null,
      tableData: [],
      costPlanTypeObj: {
        "1": "定价",
        "2": "区间",
        "3": "阶梯"
      },
    }
  },
  methods: {
    queryData() {
      this.$emit("dataQuery");
    },
    handleCurrentChange(val) {
      component.currentRow = val;
    },
    addConstPlan(deviceType) {
      component.$refs.add_cost_plan_dialog.showDialog({deviceType: deviceType});
    },
    editCostPlan(row) {
      component.$refs.add_cost_plan_dialog.showDialog(row);
    },
    delCostPlan(row) {
      this.$confirm("是否删除所选方案?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      }).then(async () => {
        try {
          let response = await this.$asyncPost("costPlan", {
            actionType: "costPlanDelete",
            costPlanIds: [row.costPlanId],
          });
          if (response.success) {
            component.$message.success("删除成功");
            component.$emit("dataQuery");
          } else {
            component.$message.error(response.message);
          }
        } catch (error) {
          component.$message.error("删除发生错误");
        }
      })
          .catch(() => {
            component.$message.info("取消");
          })
    },
  },
  mounted() {
    component = this;
  }
}
</script>

<style scoped>
</style>